<template>
  <el-dialog
    title="确认订单"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    width="500px"
  >
    <div class="order-form">
      <!-- 已选服务概览 -->
      <div class="form-section">
        <div class="selected-summary">
          <span>已选 {{ selectedServices.length }} 个服务</span>
          <span class="total">总价：¥{{ totalPrice }}</span>
        </div>
      </div>

      <!-- 技师选择 -->
      <div class="form-section">
        <h3 class="section-title">选择技师</h3>
        <div class="custom-radio-group scrollable">
    <div 
      v-for="tech in technicianList" 
      :key="tech.employeeId" 
      class="custom-radio"
      :class="{ 'selected': selectedTechnician === tech.employeeId }"
      @click="handleTechnicianClick(tech.employeeId)"
    >
      <div class="tech-info">
        <span>{{ tech.employeeName }}</span>
        <span class="tech-level">{{ tech.employeeLevel }}</span>
      </div>
    </div>
  </div>
      </div>

      <!-- 优惠券选择 -->
      <div class="form-section">
        <h3 class="section-title">选择优惠券</h3>
       <div class="custom-radio-group scrollable">
    <div 
      v-for="coupon in couponList" 
      :key="coupon.couponId" 
      class="custom-radio"
      :class="{ 'selected': selectedCoupon === coupon.couponId }"
      @click="handleCouponClick(coupon.couponId)"
    >
      <div class="coupon-info">
        <span class="coupon-amount">¥{{ coupon.couponPrice }}</span>
        <span>{{ coupon.couponName }}</span>
        <span class="coupon-condition">满{{ coupon.couponMin }}可用</span>
      </div>
    </div>
  </div>
      </div>

      <!-- 最终价格 -->
      <div class="price-section">
        <div class="price-row final">
          <span>实付金额</span>
          <span class="final-price">¥{{ finalPrice }}</span>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="confirmOrder" >
          确认下单
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { listEmployee } from '@/api/shop/employee'
import { listCoupon } from '@/api/shop/coupon'

const props = defineProps({
  modelValue: Boolean,
  selectedServices: Array,
  totalPrice: Number,
  shopInfo: Object
})

const emit = defineEmits(['update:modelValue', 'confirm'])

const selectedTechnician = ref('')
const selectedCoupon = ref('')
const technicianList = ref([])
const couponList = ref([])

// 获取技师列表
const getTechnicianList = async () => {
  try {
    const res = await listEmployee({
      shopName: props.shopInfo.shopName,
      pageNum: 1,
      pageSize: 10
    })
    technicianList.value = res.rows
  } catch (error) {
    console.error('获取技师列表失败:', error)
  }
}

// 获取优惠券列表
const getCouponList = async () => {
  try {
    const res = await listCoupon({
      userId: localStorage.getItem('id'),
      pageNum: 1,
      pageSize: 10
    })
    couponList.value = res.rows
    console.log(couponList.value);
  } catch (error) {
    console.error('获取优惠券列表失败:', error)
  }
}
// 取消技师选择
const handleTechnicianClick = (techId) => {
  console.log(techId);
  if (selectedTechnician.value === techId) {
    selectedTechnician.value = ''
  }else {
    selectedTechnician.value = techId
  }
}
// 取消优惠券选择
const handleCouponClick = (couponId) => {
  if (selectedCoupon.value === couponId) {
    selectedCoupon.value = ''
  }else {
    selectedCoupon.value = couponId
  }
}
// 计算最终价格
const finalPrice = computed(() => {
  if (!selectedCoupon.value) return props.totalPrice
  const coupon = couponList.value.find(c => c.couponId === selectedCoupon.value)
  return coupon ? props.totalPrice - coupon.couponPrice : props.totalPrice
})

// 确认下单
const confirmOrder = () => {
//   if (!selectedTechnician.value) {
//     ElMessage.warning('请选择技师')
//     return
//   }

  emit('confirm', {
    services: props.selectedServices,
    technicianId: selectedTechnician.value,
    couponId: selectedCoupon.value,
    totalPrice: props.totalPrice,
    finalPrice: finalPrice.value
  })
  emit('update:modelValue', false)
}

onMounted(() => {
  getTechnicianList()
  getCouponList()
})
</script>

<style scoped>
.order-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 24px;
}

.selected-summary {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 4px;
}

.total {
  color: #ff4d4f;
  font-weight: 500;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.el-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tech-info, .coupon-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tech-level {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 2px;
}

.coupon-amount {
  color: #ff4d4f;
  font-weight: bold;
}

.coupon-condition {
  font-size: 12px;
  color: #666;
}

.price-section {
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.final-price {
  color: #ff4d4f;
  font-size: 20px;
  font-weight: bold;
}
.custom-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-radio {
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.custom-radio:hover {
  border-color: #409eff;
}

.custom-radio.selected {
  border-color: #409eff;
  background-color: #ecf5ff;
}
.custom-radio-group.scrollable {
  max-height: 200px;  /* 设置最大高度 */
  overflow-y: auto;   /* 添加垂直滚动条 */
  padding-right: 4px; /* 为滚动条预留空间 */
}

/* 美化滚动条样式（可选） */
.custom-radio-group.scrollable::-webkit-scrollbar {
  width: 6px;
}

.custom-radio-group.scrollable::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.custom-radio-group.scrollable::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}
</style>